<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单提交</title>
    <link href="${pageContext.request.contextPath}/css/submit_order/submit_order.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js" rel="stylesheet"></script>
    <!--        <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">-->
</head>
<body>
<!--===================1.头部导航 nav=================-->
<c:import url="/header/header.jsp"/>
<!--===================2.主体=================-->
<div class="main">
    <div class="main-info">
        <!--进度条-->
        <div class="info-ProgressBar">
            <div class="layui-progress" lay-showpercent="true">
                <div class="layui-progress-bar" lay-percent="1 / 3"></div>
            </div>
            <div class="info-stage">
                <ul>
                    <li>提交订单</li>
                    <li>确认支付</li>
                    <li>完成订单</li>
                </ul>
            </div>
        </div>
        <!--每个旅客信息-->
        <div class="info-details">
            <div class="info-person-details-title">
                <i></i><h3>出行人信息</h3>
            </div>
            <ul class="info-person-number">
                <li>

                    <div class="info-person-details-p1">
                        <span>出行人1</span>
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="must" lay-verify="title" autocomplete="off" class="layui-input inputname">

                                <span class="warn-msg warn-msg-name"></span>

                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">身份证</label>
                            <div class="layui-input-block">
                                <input type="text" name="must" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input inputcard">
                                <span  class="warn-msg warn-msg-card"></span>
                            </div>
                        </div>
                    </div>

                </li>
            </ul>


        </div>
        <!--预定人信息-->
        <div class="info-person-booking">
            <div class="info-person-booking-title">
                <i></i><h3>预订人信息</h3>
            </div>
            <div class="booking-person">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="must" id="custName" lay-verify="title" autocomplete="off" class="layui-input inputname1" value="">
                        <span class="warn-msg warn-msg-name1"></span>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="must" id="custTel" lay-verify="required|phone" autocomplete="off" class="layui-input" value="">

                        <span class="warn-msg tel-msg"></span>

                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="must" id="email" lay-verify="email" autocomplete="off" class="layui-input" value="">

                        <span class="email-msg warn-msg"></span>

                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注信息</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <!--商品景点信息-->
        <div class="pro-info">
            <div class="pro-main-img" >
                <img src="${pageContext.request.contextPath}/images/submit_order/pro-main-img1.jpeg">
            </div>
            <div class="pro-details" >
                <h2>
                    <a id="travelName">成都直飞丽江6天5晚 纯玩自由行（赠大理旅拍/Smart环海自驾+全程专车服务+古城住宿+免费行程攻略设计+大理/丽江/泸沽湖/香格里拉 随心游玩自由搭配+全天24小时管家服务）</a>
                </h2>
                <ul>
                    <li>
                        <c:if test="${!empty sessionStorage.getItem('day')}">
                            <p>
                                <b>出行天数</b>
                                <em id="outDay">6</em>
                                <span>天</span>
                            </p>
                        </c:if>

                        <p>
                            <b>出行日期</b>
                            <i id="outDate">2021-09-24</i>
                        </p>
                        <p>
                            <b>出行人数</b>
                            <span>成人</span>
                            <em id="outAudltNum">1</em>
                            <span>儿童</span>
                            <em id="outChildNum">0</em>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <!--订单提交信息-->
        <div class="submit-order">
            <div class="price">
                <span>产品总金额：￥</span>
                <em id="outPriceCost">
                    2320.00
                </em>
            </div>
        </div>
        <div class="submit-order-btn">
            <div class="order-text">
                <p>
                    <i></i>我已阅读并同意
                    <a href="#">《自友行服务协议》</a>、
                    <a href="#">《旅游安全须知》</a>
                </p>
            </div>

            <div class="order-btn" id="sumbit-btn">
                <button id="gopay" style="height: 100%;width: 100%;background-color: #00FFFF" value="确认支付">确认支付</button>
            </div>

    </div>
</div>
<!--===================3.底部=================-->
    <c:import url="/header/footer.jsp"/>

</div>

    <script>

        var custName = '${loginCustomer.custName}';
        console.log("custName" + custName);
        $('#custName').val(custName);
        $("#custName").attr("disabled","disabled");

        var custTelno = '${loginCustomer.custTelno}';
        console.log("custTelno" + custTelno);
        $('#custTel').val(custTelno);
        $("#custTel").attr("disabled","disabled");

        var custEmail = '${loginCustomer.custEmail}';
        console.log("custEmail" + custEmail);
        $('#email').val(custEmail);
        $("#email").attr("disabled","disabled");

        var day = sessionStorage.getItem("day");
        console.log("day: " + day);
        var date = sessionStorage.getItem("date");
        console.log("date: " + date);
        var audltNum = sessionStorage.getItem("audltNum");
        console.log("audltNum: " + audltNum);
        var childNum = sessionStorage.getItem("childNum");
        console.log("childNum: " + childNum);
        var pricecost = sessionStorage.getItem("pricecost");
        console.log("pricecost: " + pricecost);

        var travelName = sessionStorage.getItem("travelName");
        console.log("travelName: " + travelName);

        $("#outDay").text(day);

        $("#outDate").text(date);

        $("#outAudltNum").text(audltNum);

        $("#outChildNum").text(childNum);

        $("#outPriceCost").text(pricecost);

        $("#travelName").text(travelName);


        $(".info-person-number").html("");//清空html

        var liEle = '<li>' +
            ' <div class="info-person-details-p1">' +
            '     <span>出行人1</span>' +
            '     <div class="layui-inline">' +
            '         <label class="layui-form-label">姓名</label>' +
            '         <div class="layui-input-block">' +
            '             <input type="text" name="must" lay-verify="title" autocomplete="off" class="layui-input inputname">' +
            '             <span class="warn-msg warn-msg-name"></span>' +
            '         </div>' +
            '     </div>' +
            '     <div class="layui-inline">' +
            '         <label class="layui-form-label">身份证</label>' +
            '         <div class="layui-input-block">' +
            '             <input type="text" name="must" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input inputcard">' +
            '             <span  class="warn-msg warn-msg-card"></span>' +
            '         </div>' +
            '     </div>' +
            ' </div>' +
            '</li>';

        $(".info-person-number").append(liEle);//追加li到ul中
        // console.log("11111111111111111111111111111111111111");
        for (var i = 0;i < audltNum - 1;i++){
            var el = i + 2;
            liEle = '<li>' +
                ' <div class="info-person-details-p1">' +
                '     <span>出行人' + el + '</span>' +
                '     <div class="layui-inline">' +
                '         <label class="layui-form-label">姓名</label>' +
                '         <div class="layui-input-block">' +
                '             <input type="text" name="must" lay-verify="title" autocomplete="off" class="layui-input inputname">' +
                '             <span class="warn-msg warn-msg-name"></span>' +
                '         </div>' +
                '     </div>' +
                '     <div class="layui-inline">' +
                '         <label class="layui-form-label">身份证</label>' +
                '         <div class="layui-input-block">' +
                '             <input type="text" name="must" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input inputcard">' +
                '             <span class="warn-msg warn-msg-card"></span>' +
                '         </div>' +
                '     </div>' +
                ' </div>' +
                '</li>';
            // console.log("123456789");
            $(".info-person-number").append(liEle);//追加li到ul中
        }
    </script>

    <script>
        var flag = false;
        $(".order-btn").click(function () {
            console.log('${loginCustomer.custName}');
            console.log("1:" + '${loginCustomer.custName}'.length);
            console.log('${loginCustomer.custTelno}');
            console.log("2:" + '${loginCustomer.custTelno}'.length);
            console.log('${loginCustomer.custEmail}');
            console.log("3:" + '${loginCustomer.custEmail}'.length);

            if('${loginCustomer.custName}'.length == 0 && '${loginCustomer.custTelno}'.length == 0 && '${loginCustomer.custEmail}'.length == 0){
                alert("请先完成登录或注册！");
                window.location.href ="${pageContext.request.contextPath}/customer/login.jsp";
            }else if ('${loginCustomer.custName}'.length == 0 || '${loginCustomer.custEmail}'.length == 0){
                alert("请先完成个人信息绑定!");
                window.location.href ="${pageContext.request.contextPath}/customer/binding_set.jsp";
            }else{

            var name = $('#custName').val();
            console.log("name:" + name);
            var tel = $('#custTel').val();
            console.log("tel:" + tel);
            var travelName = $("#travelName").html();
            console.log("travelName:" + travelName);
            console.log("day:" + day);
            console.log("date:" + date);
            console.log("audltNum:" + audltNum);
            console.log("childNum:" + childNum);
            console.log("pricecost:" + pricecost);


            // $("#sumbit-btn").click(function(){
            var count = 0;
            var dp = document.getElementsByName('must');
            console.log("======================" + dp.length);

            var myorderTravelerMap = new Map();

            $("input[type='text']").each(function () {
                if ($(this).val().length == 0) {
                    // $(this).find(".warn-msg").text("请填写信息！");
                    // $(".warn-msg").text("请填写信息！");
                    // return false;
                    myorderTravelerMap = null;
                    // $(this).after('<span style="float: right" name="input_error"><font color="red">请填写信息' +
                    //     '</font></span>');
                }else{
                    // $(".warn-msg").text("");
                    count = count + 1;

                }
            });

            if (count == dp.length && flag == false){

                //装入map
                for (var i = 0; i < dp.length - 3; i++) {
                    myorderTravelerMap[$(dp[i]).val()] = $(dp[i + 1]).val();
                    i++;
                }

                var url = "${pageContext.request.contextPath}/save";
                $.ajax({url : url,
                    type: "POST",
                    dataType:"json",
                    data:{"custName": name,"custTel": tel,"travelName":travelName,"audltNum":audltNum,"childNum":childNum,"myorderDate":date,"myorderPrice":pricecost},
                    success:function (result) {
                        console.log("result json:" + JSON.stringify(result));
                        var myorderId = result.myorderId;
                        var orderNo = result.myorderNo;
                        var productName = travelName;
                        var myorderPrice = pricecost;
                        console.log("myorderId:" + myorderId);
                        console.log("orderNo" + orderNo);
                        console.log("productName" + productName);
                        console.log("myorderPrice" + myorderPrice);
                        console.log("map:" + JSON.stringify(myorderTravelerMap));

                        //=======================================发出第二个ajax请求

                        $.ajax({url : "${pageContext.request.contextPath}/saveMyorderTraveler/" + myorderId,
                                type: "POST",
                                contentType : 'application/json;charset=utf-8',
                                dataType: "json",
                                async:true,
                                data: JSON.stringify(myorderTravelerMap),
                                success:function (database) {
                                    console.log(database);
                                }
                        });

                        $("#gopay").after('<form name="payForm" action="<%=request.getContextPath() %>/ali/pay" method="post">\n' +
                            '<input type="hidden" name="orderId" value=" ' + orderNo + '"/>\n' +
                            '<input type="hidden" name="productName" value="景点门票">\n' +
                            '<input type="hidden" name="myorderPrice" value=" ' + myorderPrice + ' "/>\n' +
                            '<input class="submitBtn" style="display:none" type="submit" value="支付">\n' +
                            '</form>');
                        $(".submitBtn").click();
                    }
                });
                flag = true;
            }
            }
        });
        // });
    </script>



<script src="${pageContext.request.contextPath}/js/submit_order/submit_order.js"></script>
<script src="${pageContext.request.contextPath}/dist/layui/layui.js" charset="utf-8"></script>

</body>
</html>
